<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script data-th-src="@{/layui/layui.js}"></script>

    <link rel="stylesheet" data-th-href="@{/layui/css/layui.css}">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1965060_1qxhaa30jyu.css">
</head>
<body>

    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" id="recover">
            <i class="layui-icon layui-icon-refresh-3"></i>
            恢复
        </button>
        <button class="layui-btn layui-btn-sm " id="delete">
            <i class="layui-icon layui-icon-close-fill"></i>
            彻底删除
        </button>
<!--        <button class="layui-btn layui-btn-sm " lay-event="update">-->
<!--            <i class="layui-icon layui-icon-download-circle"></i>-->
<!--            离线下载-->
<!--        </button>-->
    </div>
    <div class="layui-btn-container" style="padding-left: 10px;padding-top: 10px;">
    <span class="layui-breadcrumb preDir">
      <a pid="-1">返回上一级&emsp;|&emsp;</a>
    </span>
        <span class="layui-breadcrumb dirList" lay-separator=">">
          <a pid="-1"><cite>全部文件</cite></a>
    </span>
    </div>

<table id="diskTable" lay-filter="disk"></table>

<script data-th-inline="javascript">
    class DirList {
        history = [];
        listeners = [];

        constructor(elem) {
            this.elem = elem;
            this.render();
        }

        get(id) {
            for (let historyElement of this.history) {
                if (historyElement.id == id) {
                    return historyElement;
                }
            }
            return null;
        }

        addListener(listener) {
            this.listeners.push(listener);
        }

        push(id, pid, name) {
            this.history.push({id, pid, name});
            this.render();
        }

        clear() {
            this.history.length = 0;
            this.render();
        }

        pop(pid) {
            try {
                // [1,2,3,4,5,6] = > [1,2]
                // [1,2,3]
                if (pid > 0 && this.history.length > 2) {
                    if (this.history[this.history.length - 2].id == pid) {
                        this.history.pop();
                        return;
                    }
                    this.history.pop();
                    this.pop(pid);
                }
                return this.history.pop();
            } finally {
                this.render();
            }
        }

        render() {
            if (this.history.length == 0) {
                this.elem.hidden = true;
            } else {
                this.elem.hidden = false;
            }
            this.elem.innerHTML = this.toString();
            let listeners = this.listeners;
            let elem=this.elem;
            layui.use(['element','jquery'], function () {
                let {element,$} = layui;
                element.init();
                $(elem).find("a").click(function (e) {
                    for (let listener of listeners) {
                        listener.call(this,e);
                    }
                });
            })
        }

        toString() {
            let html = '';
            for (let i = 0; i < this.history.length; i++) {
                if (i == this.history.length - 1) {
                    html += `
                    <a ><cite>${this.history[i].name}</cite></a>
                `;
                } else {
                    html += `
                    <a pid="${this.history[i].id}">${this.history[i].name}</a>
                    `;
                }
            }
            return html;
        }

    }
    function getPid(){
        let parent=layui.data("parentDir");
        if(parent){
            if(parent.pid != null && parent.pid != undefined){
                return parent.pid;
            }
        }
        return -1;
    }
    function setPid(pid){
        layui.data("parentDir",{value:pid,key:'pid'});
    }

    layui.use(['table', 'jquery', 'form', 'layer','upload'], function () {
        let {table, $, form, layer,upload} = layui;
        //重置父文件夹
        setPid(-1);

        let ids = [];
        table.on('checkbox(disk)', function (obj) {
            ids.length = 0;
            let checkStatus = table.checkStatus('files');
            //判断当前是否为选中状态
            if (obj.checked) {
                $("#delete").show();
                for (let i = 0; i < checkStatus.data.length; i++) {
                    ids.push(checkStatus.data[i].id)
                }
                console.log(ids);
            } else {
                $("#delete").hide();
            }
        });

        $("#recover").click(function (e) {

            layer.confirm('确定恢复？', function (index) {
                layer.close(index);
                $.post(
                    "[(@{/recycleInfo/recover})]"
                    , {
                        'ids': ids
                    }
                    , function (rs) {
                        if (rs.code == 0) {
                            table.reload('files');
                            layer.msg("恢复成功");
                        } else {
                            layer.msg("恢复失败");
                            console.error(rs.msg);
                        }
                    }
                    , 'json')
            });
        });
        //删除
        $("#delete").click(function (e) {

            layer.confirm('确定删除？', function (index) {
                layer.close(index);
                $.post(
                    "[(@{/recycleInfo/delete})]"
                    , {
                        'ids': ids
                    }
                    , function (rs) {
                        if (rs.code == 0) {
                            table.reload('files');
                            layer.msg("删除成功");
                        } else {
                            layer.msg("删除失败");
                            console.error(rs.msg);
                        }
                    }
                    , 'json')
            });
        });
        table.render({
            id:'files'
            ,elem: '#diskTable'
            , height: 312
            , url: '[(@{/recycleInfo})]' //数据接口
            , defaultToolbar:false
            , cols: [
                [ //表头
                    {fixed: 'left',type:'checkbox' }
                    ,{field: 'name', title: '文件名',width:500,templet:function(d){
                        if(d.directory){
                            return `<i class="iconfont icon-wenjianjiaguanbi"></i>&emsp;<span>${d.name}</span>`;
                        }
                        return d.name;
                    }}
                    , {field: 'size', title: '大小', sort: true,templet:function (d) {
                        if(d.size>0){
                            return d.size;
                        }
                        return '-';
                    }}
                    , {field: 'updatedTime', title: '修改日期'}
                    , {fixed: 'right', title: '操作',width:80}
                ]
            ]
        });

        //监听行双击事件
        table.on('rowDouble(disk)', function (obj) {
            if (obj.data.directory) {
                setPid(obj.data.id);
                history.push(obj.data.id, obj.data.pid, obj.data.name);
                preDir.clear();
                preDir.push(obj.data.id, obj.data.pid, '返回上一级');
                preDir.push(obj.data.id, obj.data.pid, '');
                table.reload('files', {
                    where: {
                        pid: obj.data.id
                    }
                })
            }
        });
    })
</script>
</body>
</html>